<script setup>
const props = defineProps({
  count: {
    type: Number,
    default: 0,
  },
  position: {
    type: String,
    default: 'top-[4px] right-[4px]',
  },
  hasBorder: {
    type: Boolean,
    default: false,
  },
})

const badgeClass = computed(() => {
  return props.hasBorder ? 'border-2 border-[--line-0]' : ''
})
</script>

<template>
  <div class="relative">
    <slot></slot>

    <div
      v-if="props.count"
      class="text-xs text-[--text-0] rounded-full bg-[--fill-2] w-4 h-4 flex-cc bg-red-500 absolute box-content"
      :class="props.position + ' ' + badgeClass">
      {{ props.count }}
    </div>
  </div>
</template>
